<template>
  <div :class="[$store.state.appPrefix + '-c-chart-circle']">
    <svg class="circle-chart" width="200" height="172" viewBox="0 0 200 172">
      <circle
        v-for="(item, index) in circleChart.outerSegments"
        :key="index"
        cx="100"
        cy="100"
        r="89"
        fill="none"
        :stroke="item.color"
        stroke-width="18"
        stroke-linecap="butt"
        :stroke-dasharray="backgroundCircumferenceOut"
        :stroke-dashoffset="progressOffsetOut(item)"
        :transform="circleRotation"
      />
      <circle
        cx="100"
        cy="100"
        r="87"
        fill="none"
        stroke="#FFFFFF"
        stroke-width="18"
        stroke-linecap="butt"
        :stroke-dasharray="backgroundCircumferenceOutWhite"
        :stroke-dashoffset="0"
        :transform="circleRotation"
      />
      <!-- 背景圆环 -->
      <circle
        cx="100"
        cy="100"
        r="85"
        fill="none"
        stroke="#F2F4F6"
        stroke-width="18"
        stroke-linecap="butt"
        :stroke-dasharray="backgroundCircumference"
        :stroke-dashoffset="0"
        :transform="circleRotation"
      />
      <!-- 进度圆环 -->
      <circle
        cx="100"
        cy="100"
        r="85"
        fill="none"
        :stroke="progressColor"
        stroke-width="18"
        stroke-linecap="butt"
        :stroke-dasharray="progressCircumference"
        :stroke-dashoffset="progressOffset"
        :transform="circleRotation"
        class="progress-circle"
      />
    </svg>
    <div class="progress-box">
      <span class="progress-number" :style="{ color: progressColor }">{{ progress }}</span>
      <span class="progress-txt">本次综合分</span>
      <span class="progress-tag" :class="progressTagClass">{{ progressTag }}</span>
    </div>
  </div>
</template>

<script >
export default {
  props: {
    // 标题
    progress: {
      type: Number,
      default: 70
    },
  },
  data() {
    return {
      circleChart: {
        radius: 85, // 圆环半径
        angle: 220, // 圆环角度（度）
        rotationAngle: -200, // 圆环旋转角度（度）
        outerSegments: [
          { color: '#2AB55E', progress: 100 }, // 黄色段，50度
          { color: '#FFFFFF', progress: 95.5 }, // 间隔
          { color: '#2AB55E', progress: 95 }, // 绿色段，45度
          { color: '#FFFFFF', progress: 85.5 }, // 间隔
          { color: '#315BF4', progress: 85 }, // 蓝色段，42度
          { color: '#FFFFFF', progress: 69.5 }, // 间隔
          { color: '#F28F15', progress: 69 }, // 青色段，38度
          { color: '#FFFFFF', progress: 59.5 }, // 间隔
          { color: '#F02525', progress: 59 }, // 红色段，35度
        ]
      }
    }
  },
  computed: {
    // 当前进度颜色
    progressColor() {
      if (this.progress <= 59) {
        return '#F02525'
      } else if (this.progress >= 59 && this.progress <= 69) {
        return '#F28F15'
      } else if (this.progress >= 69 && this.progress <= 85) {
        return '#315BF4'
      } else if (this.progress >= 85 && this.progress <= 95) {
        return '#2AB55E'
      } else if (this.progress >= 95 && this.progress <= 100) {
        return '#2AB55E'
      }
    },
    // 获取当前分数标签
    progressTag() {
      if (this.progress <= 59) {
        return '需改进'
      } else if (this.progress >= 59 && this.progress <= 69) {
        return '一般'
      } else if (this.progress >= 69 && this.progress <= 85) {
        return '良好'
      } else if (this.progress >= 85 && this.progress <= 95) {
        return '优秀'
      } else if (this.progress >= 95 && this.progress <= 100) {
        return '卓越'
      }
    },
    progressTagClass() {
      if (this.progress <= 59) {
        return 'progress-tag-red'
      } else if (this.progress >= 59 && this.progress <= 69) {
        return 'progress-tag-yellow'
      } else if (this.progress >= 69 && this.progress <= 85) {
        return 'progress-tag-blue'
      } else if (this.progress >= 85 && this.progress <= 95) {
        return ''
      } else if (this.progress >= 95 && this.progress <= 100) {
        return ''
      }
    },
    // 获取当前进度值，优先使用props，否则使用data中的值
    currentProgress() {
      const ratio = 220 / 360
      return this.progress * ratio || 0
    },
    // 计算背景圆环的周长
    backgroundCircumference() {
      return 2 * Math.PI * this.circleChart.radius * (this.circleChart.angle / 360)
    },
    backgroundCircumferenceOut() {
      return 2 * Math.PI * 89
    },
    backgroundCircumferenceOutWhite() {
      return 2 * Math.PI * 87 * (this.circleChart.angle / 360)
    },
    // 计算进度圆环的周长
    progressCircumference() {
      return 2 * Math.PI * this.circleChart.radius
    },
    // 计算进度圆环的偏移量
    progressOffset() {
      const circumference = 2 * Math.PI * this.circleChart.radius
      return circumference - (circumference * this.currentProgress / 100)
    },
    // 计算圆环的旋转角度
    circleRotation() {
      return `rotate(${this.circleChart.rotationAngle} 100 100)`
    }
  },
  methods: {
    progressOffsetOut(item) {
      const circumference = 2 * Math.PI * 89
      const ratio = 220 / 360
      const currentProgress = item.progress * ratio || 0
      return circumference - (circumference * currentProgress / 100)
    },
  }
}
</script>
